<template>
    <div class="app-container">
        <header-title/>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="80px">
            <el-form-item label="标题/作者" prop="keyword">
                <el-input
                    v-model="queryParams.keyword"
                    placeholder="请输入标题/作者"
                    clearable
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="queryParams.type" clearable filterable>
                    <el-option 
                        v-for="dict in dict.type.operate_manual_type"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"
                    ></el-option>
                </el-select>
            </el-form-item> 
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                <el-button type="primary" icon="el-icon-plus" @click="onHandleAdd">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableList">
            <el-table-column label="ID" align="center" prop="operationManuaId" />
            <el-table-column label="操作类型" align="center" prop="type" :formatter="row=>selectDictLabel(dict.type.operate_manual_type,row.type) || '-'"/>
            <el-table-column label="标题" align="center" prop="title" />
            <el-table-column label="作者" align="center" prop="author" />
            <el-table-column label="排序" align="center" prop="order" />

            <el-table-column label="操作" align="center" prop="title">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        icon="el-icon-edit"
                        @click="onHandleUpdate(scope.row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        icon="el-icon-delete"
                        size="mini"
                        @click="handleDelete(scope.row)"
                        >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
        <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="90px">
                <el-row :gutter="20">
                    <el-col :span="24" >
                        <el-form-item  label="类型" prop="type">
                            <el-select v-model="form.type" clearable filterable>
                                <el-option 
                                    v-for="dict in dict.type.operate_manual_type"
                                    :key="dict.value"
                                    :label="dict.label"
                                    :value="dict.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                        <el-form-item  label="标题" prop="title">
                            <el-input  v-model="form.title" placeholder="请输入标题"  />

                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="缩略图" prop="headImg">
                            <imageUpload v-model="form.headImg" size="mini" :limit="1" :isJson="false"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                        <el-form-item  label="作者名称" prop="author">
                            <el-input  v-model="form.author" placeholder="请输入作者名称"  />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" >
                        <el-form-item  label="排序" prop="order">
                            <el-input  v-model="form.order" placeholder="请输入排序" type="number" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item  label="正文内容" prop="content">
                            <editor v-model="form.content" :max-height="400"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="open = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {listOperationManua,addOperationManua,detailOperationManua,updateOperationManua,delOperationManua} from '@/api/operateManage/operationManua.js'
    export default{
        name:'OperationManua',
        dicts: ['operate_manual_type'],
        data() {
            return {
                loading: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 参数表格数据
                tableList: [],
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    keyword: undefined,
                    type:''
                },
                form: {},
                open: false,
                title:'',
                rules: {
                    author:[
                        { required: true, message: "作者不能为空", trigger: "change" }
                    ],
                    content:[
                        { required: true, message: "正文内容不能为空", trigger: "change" }
                    ],
                    
                    title:[
                        { required: true, message: "标题不能为空", trigger: "change" }
                    ],
                    type:[
                        { required: true, message: "类型不能为空", trigger: "change" }
                    ],
                    order: [
                        {required: true, message: "排序不能为空", trigger: "change" }
                    ]
                },
            }
        },
        created() {
            this.getList()
        },
        methods: {
            handleDelete(row) {
                const ids = row.operationManuaId
                this.$modal.confirm('是否确认删除标题为"' + row.title + '"的数据项？').then(function() {
                    return delOperationManua(ids);
                }).then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {});
            },
            onHandleUpdate(row) {
                this.title = '编辑操作手册'
                detailOperationManua({id: row.operationManuaId}).then(res=> {
                    this.form = res.data
                    this.open = true
                })
            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if(this.form.operationManuaId) {
                            updateOperationManua(this.form).then(res=> {
                                this.$modal.msgSuccess(res.msg);
                                this.open = false;
                                this.getList();
                            })
                        }else{
                            addOperationManua(this.form).then(res=> {
                                this.$modal.msgSuccess(res.msg);
                                this.open = false;
                                this.getList();
                            })
                        }
                    }
                })
            },
            onHandleAdd() {
                this.title = '新增操作手册'
                this.form = {
                    author:'',
                    content:'',
                    headImg:'',
                    order:99,
                    title:"",
                    type:""
                }
                this.open = true
            },
            getList() {
                this.loading = true;
        
                listOperationManua(this.queryParams).then(response => {
                    this.tableList = response.data.records;
                    this.total = response.data.total;
                    this.loading = false;
                });
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
        }
    }
</script>